<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交易明细视图查询 - 银行业务管理系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/css/all.min.css" rel="stylesheet">
    
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f8f9fa;
        }

        .navbar-brand {
            font-weight: bold;
            color: #007bff !important;
        }

        .sidebar {
            min-height: calc(100vh - 56px);
            background-color: #343a40;
            padding-top: 20px;
        }

        .sidebar .nav-link {
            color: #adb5bd;
            padding: 10px 20px;
            border-radius: 0;
        }

        .sidebar .nav-link:hover,
        .sidebar .nav-link.active {
            color: #fff;
            background-color: #495057;
        }

        .main-content {
            padding: 20px;
        }

        .card {
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            border: 1px solid rgba(0, 0, 0, 0.125);
            margin-bottom: 20px;
        }

        .card-header {
            background-color: #f8f9fa;
            border-bottom: 1px solid rgba(0, 0, 0, 0.125);
            font-weight: 600;
        }

        .table th {
            background-color: #f8f9fa;
            border-top: none;
            font-weight: 600;
        }

        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
        }

        .search-form {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }

        .trade-type-badge {
            font-size: 0.8rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="/admin">
                <i class="fas fa-university"></i>
                银行业务管理系统 - 管理员
            </a>

            <div class="navbar-nav ml-auto">
                <a class="nav-link" href="/">
                    <i class="fas fa-home"></i> 返回首页
                </a>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <nav class="col-md-2 d-none d-md-block sidebar">
                <div class="sidebar-sticky">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="/admin">
                                <i class="fas fa-university"></i> 功能总览
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/admin/customers">
                                <i class="fas fa-users"></i> 客户管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/admin/cards">
                                <i class="fas fa-credit-card"></i> 银行卡管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/admin/deposit-types">
                                <i class="fas fa-piggy-bank"></i> 存款业务管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/admin/trades">
                                <i class="fas fa-exchange-alt"></i> 交易管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-toggle="collapse" data-target="#viewsSubmenu" aria-expanded="true">
                                <i class="fas fa-eye"></i> 视图查询 <i class="fas fa-caret-down"></i>
                            </a>
                            <div class="collapse show" id="viewsSubmenu">
                                <ul class="nav flex-column ml-3">
                                    <li class="nav-item">
                                        <a class="nav-link" href="/admin/views/customer-cards">
                                            <i class="fas fa-credit-card"></i> 客户银行卡视图
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link active" href="/admin/views/trade-details">
                                            <i class="fas fa-list-alt"></i> 交易明细视图
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>

            <!-- 主内容区 -->
            <main class="col-md-10 ml-sm-auto main-content">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">
                        <i class="fas fa-eye"></i> 交易明细视图查询
                    </h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <div class="btn-group mr-2">
                            <button type="button" class="btn btn-success" onclick="exportData()">
                                <i class="fas fa-download"></i> 导出数据
                            </button>
                            <button type="button" class="btn btn-outline-secondary" onclick="refreshData()">
                                <i class="fas fa-sync-alt"></i> 刷新
                            </button>
                        </div>
                    </div>
                </div>
            
            <!-- 搜索表单 -->
            <div class="search-form">
                <form id="searchForm">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="cardId">银行卡号</label>
                                <input type="text" class="form-control" id="cardId" name="cardId" placeholder="请输入银行卡号">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="customerName">客户姓名</label>
                                <input type="text" class="form-control" id="customerName" name="customerName" placeholder="请输入客户姓名">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="tradeType">交易类型</label>
                                <select class="form-control" id="tradeType" name="tradeType">
                                    <option value="">全部</option>
                                    <option value="存入">存入</option>
                                    <option value="支取">支取</option>
                                    <option value="转账">转账</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="startTime">开始时间</label>
                                <input type="datetime-local" class="form-control" id="startTime" name="startTime">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="endTime">结束时间</label>
                                <input type="datetime-local" class="form-control" id="endTime" name="endTime">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="minAmount">最小金额</label>
                                <input type="number" class="form-control" id="minAmount" name="minAmount" step="0.01" placeholder="请输入最小金额">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="maxAmount">最大金额</label>
                                <input type="number" class="form-control" id="maxAmount" name="maxAmount" step="0.01" placeholder="请输入最大金额">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>&nbsp;</label>
                                <div class="d-flex">
                                    <button type="submit" class="btn btn-primary mr-2">
                                        <i class="fas fa-search"></i> 查询
                                    </button>
                                    <button type="button" class="btn btn-secondary" onclick="resetForm()">
                                        <i class="fas fa-undo"></i> 重置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            
                <!-- 数据表格 -->
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-table"></i> 交易明细视图列表
                        <span class="badge badge-primary ml-2" id="totalCount">0</span>
                    </div>
                    <div class="card-body">
                        <div class="loading">
                            <div class="spinner-border text-primary" role="status">
                                <span class="sr-only">加载中...</span>
                            </div>
                            <p class="mt-2">正在加载数据...</p>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-striped table-hover" id="viewTable">
                                <thead>
                                    <tr>
                                        <th>交易ID</th>
                                        <th>银行卡号</th>
                                        <th>客户姓名</th>
                                        <th>交易日期</th>
                                        <th>交易类型</th>
                                        <th>交易金额</th>
                                        <th>目标卡号</th>
                                        <th>备注</th>
                                        <th>当前余额</th>
                                    </tr>
                                </thead>
                                <tbody id="dataTableBody">
                                    <!-- 数据将通过JavaScript动态加载 -->
                                </tbody>
                            </table>
                        </div>

                        <!-- 分页 -->
                        <nav aria-label="分页导航">
                            <ul class="pagination justify-content-center" id="pagination">
                                <!-- 分页将通过JavaScript动态生成 -->
                            </ul>
                        </nav>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        let currentPage = 1;
        const pageSize = 10;
        
        // 更新总数显示
        function updateTotalCount(total) {
            $('#totalCount').text(total || 0);
        }

        $(document).ready(function() {
            loadData();

            // 搜索表单提交
            $('#searchForm').on('submit', function(e) {
                e.preventDefault();
                currentPage = 1;
                loadData();
            });
        });
        
        // 加载数据
        function loadData(page = 1) {
            currentPage = page;
            
            const formData = {
                current: currentPage,
                size: pageSize,
                cardId: $('#cardId').val().trim(),
                customerName: $('#customerName').val().trim(),
                tradeType: $('#tradeType').val(),
                startTime: $('#startTime').val(),
                endTime: $('#endTime').val(),
                minAmount: $('#minAmount').val(),
                maxAmount: $('#maxAmount').val()
            };
            
            showLoading(true);
            
            $.ajax({
                url: '/admin/views/trade-details/page',
                method: 'GET',
                data: formData
            })
            .done(function(result) {
                if (result.code === 200) {
                    renderTable(result.data.records);
                    renderPagination(result.data);
                    updateTotalCount(result.data.total);
                } else {
                    showError(result.message);
                }
            })
            .fail(function() {
                showError('网络请求失败，请检查网络连接');
            })
            .always(function() {
                showLoading(false);
            });
        }
        
        // 渲染表格
        function renderTable(data) {
            const tbody = $('#dataTableBody');
            tbody.empty();
            
            if (data.length === 0) {
                tbody.append(`
                    <tr>
                        <td colspan="9" class="text-center text-muted">
                            <i class="fas fa-inbox fa-2x mb-2"></i><br>
                            暂无数据
                        </td>
                    </tr>
                `);
                return;
            }
            
            data.forEach(function(item) {
                const tradeTypeBadge = getTradeTypeBadge(item.tradeType);
                const row = `
                    <tr>
                        <td>${item.tradeId}</td>
                        <td>${item.cardId}</td>
                        <td>${item.customerName}</td>
                        <td>${formatDateTime(item.tradeDate)}</td>
                        <td>${tradeTypeBadge}</td>
                        <td>¥${formatMoney(item.tradeMoney)}</td>
                        <td>${item.targetCardId || '-'}</td>
                        <td>${item.remark || '-'}</td>
                        <td>¥${formatMoney(item.balance)}</td>
                    </tr>
                `;
                tbody.append(row);
            });
        }
        
        // 获取交易类型徽章
        function getTradeTypeBadge(tradeType) {
            let badgeClass = 'badge-secondary';
            switch (tradeType) {
                case '存入':
                    badgeClass = 'badge-success';
                    break;
                case '支取':
                    badgeClass = 'badge-warning';
                    break;
                case '转账':
                    badgeClass = 'badge-info';
                    break;
            }
            return `<span class="badge ${badgeClass} trade-type-badge">${tradeType}</span>`;
        }
        
        // 渲染分页
        function renderPagination(pageData) {
            const pagination = $('#pagination');
            pagination.empty();
            
            const totalPages = pageData.pages;
            const current = pageData.current;
            
            // 上一页
            pagination.append(`
                <li class="page-item ${current <= 1 ? 'disabled' : ''}">
                    <a class="page-link" href="#" onclick="loadData(${current - 1})">上一页</a>
                </li>
            `);
            
            // 页码
            for (let i = Math.max(1, current - 2); i <= Math.min(totalPages, current + 2); i++) {
                pagination.append(`
                    <li class="page-item ${i === current ? 'active' : ''}">
                        <a class="page-link" href="#" onclick="loadData(${i})">${i}</a>
                    </li>
                `);
            }
            
            // 下一页
            pagination.append(`
                <li class="page-item ${current >= totalPages ? 'disabled' : ''}">
                    <a class="page-link" href="#" onclick="loadData(${current + 1})">下一页</a>
                </li>
            `);
        }
        
        // 重置表单
        function resetForm() {
            $('#searchForm')[0].reset();
            currentPage = 1;
            loadData();
        }
        
        // 刷新数据
        function refreshData() {
            loadData(currentPage);
        }
        
        // 导出数据
        function exportData() {
            // 获取当前搜索参数
            const searchParams = new URLSearchParams({
                cardId: $('#cardId').val().trim() || '',
                customerName: $('#customerName').val().trim() || '',
                tradeType: $('#tradeType').val() || '',
                startTime: $('#startTime').val() || '',
                endTime: $('#endTime').val() || '',
                minAmount: $('#minAmount').val() || '',
                maxAmount: $('#maxAmount').val() || ''
            });

            // 移除空值参数
            for (let [key, value] of searchParams.entries()) {
                if (!value) {
                    searchParams.delete(key);
                }
            }

            const url = '/admin/views/trade-details/export?' + searchParams.toString();
            window.open(url, '_blank');
        }
        
        // 显示/隐藏加载动画
        function showLoading(show) {
            if (show) {
                $('.loading').show();
                $('#viewTable').hide();
            } else {
                $('.loading').hide();
                $('#viewTable').show();
            }
        }
        
        // 工具函数
        function formatMoney(amount) {
            if (amount == null || amount === '') return '0.00';
            return parseFloat(amount).toFixed(2);
        }

        function formatDateTime(dateTime) {
            if (!dateTime) return '-';
            const date = new Date(dateTime);
            return date.getFullYear() + '-' +
                   String(date.getMonth() + 1).padStart(2, '0') + '-' +
                   String(date.getDate()).padStart(2, '0') + ' ' +
                   String(date.getHours()).padStart(2, '0') + ':' +
                   String(date.getMinutes()).padStart(2, '0') + ':' +
                   String(date.getSeconds()).padStart(2, '0');
        }

        function showSuccess(message) {
            showAlert('success', message);
        }

        function showError(message) {
            showAlert('danger', message);
        }

        function showAlert(type, message) {
            const alertHtml = `
                <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                    ${message}
                    <button type="button" class="close" data-dismiss="alert" aria-label="关闭">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            `;

            // 移除现有的alert
            $('.alert').remove();

            // 在主内容区顶部添加alert
            $('.main-content').prepend(alertHtml);

            // 3秒后自动关闭
            setTimeout(function() {
                $('.alert').fadeOut();
            }, 3000);
        }
    </script>
</body>
</html>
